	<script type="text/javascript">
	$(function() {
		$("#tabs").tabs();

		$(".food_materials ul li a img").click(function(){
			  $("#cart_shadow").remove();
			  var $shadow = $('<div id="cart_shadow" style="display: none; background-color: #bbb; border:1px solid #aaa;z-index: 9999;">&nbsp;</div>').prependTo("body");
			  var $img = $(this);  //$(this).prev("img");
			  $shadow.css({
						'width' : $img.css('width'),
						'height': $img.css('height') ,
						'position' : 'absolute',
						'top' : $img.offset().top,
						'left' : $img.offset().left,
						'opacity' : 0.6
					 })
					 .show();
			  var $cart = $("#food_dropper");
			  $shadow.animate({
						  width: 48,
						  height: 48,
						  top: $cart.offset().top,
						  left: $cart.offset().left,
						  opacity: 0
					 },  { duration: 600 , complete: function(){
							 $cart.append("<div class='food_dropper_item'>"
                                          + "<img class='cart_img' src='" + $img.attr('src') +  "'/>"
                                          + $img.attr('alt') + "&nbsp;&nbsp;<a href='#' class='remove_item'>删除</a>"
                                          + "<input type='hidden' value='"+ $img.attr('id') +"'/>"
                                          + "</div>");
					     }
					 })
			return false;
		});

        $(".remove_item").live('click', function(){
            $(this).parent(".food_dropper_item").remove();
            return false;
        });

	});

	</script>




<div id="main" class="two_col_wrap">

<div id="left">

	<h1>开始做菜</h1>

	<p style="color: green"><%= flash[:notice] %></p>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-materials1">蔬菜</a></li>
            <li><a href="#tabs-materials2">肉类</a></li>
            <li><a href="#tabs-spices">调味料</a></li>
        </ul>
        <div id="tabs-materials1" class="food_materials" style="filter: Alpha(Opacity=50)">
            <p>这里显示各种蔬菜</p>
            <ul class="dl_list">
              <% for vege in @user.vegetables -%>
              <% base_vege = vege.base_material %>
                <li>
                  <div class="div_materials">
                    <A href="#"><img id="material_<%=base_vege.id%>" src="images/vegetables/<%=base_vege.id%>.gif" alt="<%=base_vege.name%>"/></A>
                  </div>
                </li>
             <% end %>
            </ul>
        </div>
        <div id="tabs-materials2"  class="food_materials">
            <p>这里显示肉类</p>
            <ul class="dl_list">
              <% for meat in @user.meat -%>
              <% base_meat = meat.base_material %>
                <li>
                  <div class="div_materials">
                    <A href="#"><img id="material_<%=base_meat.id%>" src="images/meat/<%=base_meat.id%>.gif" alt="<%=base_meat.name%>"/></A>
                  </div>
                </li>
             <% end %>
            </ul>
        </div>
        <div id="tabs-spices"  class="food_materials">
            <p>这里显示调味料</p>
            <ul class="dl_list">
              <% for spice in @user.spices -%>
              <% base_spice = spice.base_spice %>
                <li>
                  <div class="div_materials">
                    <A href="#"><img id="spice_<%=base_spice.id%>" src="images/spices/<%=base_spice.id%>.gif" alt="<%=base_spice.name%>"/></A>
                  </div>
                </li>
             <% end %>
            </ul>
        </div>
    </div>


</div> <!-- of <div id="left"> -->

<div id="right">
  <div id="food_dish" class="box">
    食材：<%= @choosed_dish.material_name_list %><br/>
    调料：<%= @choosed_dish.spice_name_list %><br/>
  </div>
  <%= form_tag(make_step_3_path()) -%>
  <%=hidden_field_tag 'base_dish_id', @base_dish_id %>
  <%=hidden_field_tag 'stove_num', @stove_num %>
  <div id="food_dropper">

       <ul>

       </ul>
      
      
  </div>
  <div class="clear"></div>
  <div style="text-align: center;"><%= submit_tag "开始做菜" %></div>
  </form>
</div>  <!-- of <div id="right"> -->

</div> <!-- of <div id="main"> -->
